<template>
  <Suspense>
    <!-- 右键点击 -->
    <main class="main drag" @contextmenu="appQuit">
      <section>
        <SettingIcon
          v-if="config.page === 'camera'"
          class="icon no-drag"
          theme="outline"
          size="24"
          fill="#fff"
          @click="config.page = 'setting'"
        />
        <CameraFive
          v-else
          class="icon no-drag"
          theme="outline"
          size="24"
          fill="#fff"
          @click="config.page = 'camera'"
        />
        <HandleRound
          class="icon round-icon no-drag"
          theme="outline"
          size="24"
          fill="#fff"
          @click="changeRound"
        />
      </section>
      <section>
        <Camera v-if="config.page === 'camera'" />
        <Setting v-else />
      </section>
    </main>
  </Suspense>
</template>

<script setup lang="ts">
import Camera from './components/Camera.vue'
import Setting from './components/Setting.vue'
import {
  Setting as SettingIcon,
  CameraFive,
  HandleRound
} from '@icon-park/vue-next'
import { useConfigStore } from '@renderer/stores/useConfigStore'

const { config } = useConfigStore()

function appQuit() {
  window.api.quit()
}

function changeRound() {
  config.round = !config.round
  // 如果是圆角
  if (config.round) {
    window.api.setWindowSize({ aspectRatio: 1, width: 300, height: 300 })
  } else {
    window.api.setWindowSize({ aspectRatio: 16 / 9, width: 500, height: 280 })
  }
}
</script>

<style lang="less" scoped>
.main {
  position: relative;
  width: 100vw;
  height: 100vh;

  .icon {
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 10px auto 0;
    text-align: center;
    cursor: pointer;

    &.round-icon {
      bottom: 10px;
    }

    &:hover {
      opacity: 0.8;
    }
  }
}
</style>
